<template>
	<div class="back_contain_n">
		<div class="leftList">
			<li v-for="(item,index) in paramList" :key="index" :class="{'active': viewType == item.key}"
				@click="changeView(item)">
				<el-badge :value="item.num" class="item">
					<span>{{item.name}}</span>
				</el-badge>
			</li>
		</div>
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.storageOutType" placeholder="出库类型">
							<el-option label="销售" value="1"></el-option>
							<el-option label="报废" value="2"></el-option>
						</el-select>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.storageOutCode" placeholder="出库号"></el-input>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.outStorageUser" placeholder="出库人"></el-input>
					</div>
					<div class="input_flex daterange">
						<el-date-picker v-model="time" type="daterange" :picker-options="pickerOptions"
							range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<!-- table -->
		<sys-table ref="systable" :isMultipleSelection="false" :tableData="tableData" :tableLoading="tableLoading"
			:tableHeader="tableHeader" :scopeWidth="120" :backCount="backCount" :isOperate="false"
			@getBackData="getList">
			<template slot-scope="scope" slot="operate">
				<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
			</template>
		</sys-table>
		<div class="zll-dialog">
			<popout :title="viewType" :visible.sync="addDialog" v-if="addDialog" class="bg_Size">
				<add ref="add" slot="content" :editData="editData" :type="type"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add.vue'
	import { formatDate } from "@/plugins/formatDate";

	export default {
		data() {
			return {
				viewType: '0',
				paramList: [
					{ name: "成品出库明细", key: '0', tableType: '0' },
					{ name: "物料出库明细", key: '1', tableType: '1' },
				],
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				queryForm: {
					outStorageUser: '',
					storageOutCode: '',
					storageOutType: '',
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				time: [],
				pickerOptions: {
					onPick: ({ minDate }) => {
						this.minDate = minDate
					},
					disabledDate: (time) => {
						if (this.minDate) {
							const oneYear = 365 * 24 * 60 * 60 * 1000
							return time.getTime() < this.minDate.getTime() ||
								time.getTime() > this.minDate.getTime() + oneYear
						}
						return false
					}
				}
			}
		},
		methods: {
			changeView(val) {
				this.viewType = val.key;
				this.getList()
			},
			edit(val, type) {
				let self = this;
				self.addDialog = true;
				self.type = type;
				self.$nextTick(() => {
					self.editData = Object.assign({}, val);
				});
			},

			getProductStorageOutListMX(startIndex, pageRow) {
				let self = this;
				self.tableLoading = true;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.queryForm.startTime = ''
					self.queryForm.endTime = ''
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				param.storageOutStatus = '1';
				self.$http({
					url: "/jinl/productStorageOut/getProductStorageOutListMX",
					method: "post",
					params: param
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "storageOutCode", "columnName": "出库号" },
							{ "columnValue": "storageOutTime", "columnName": "出库日期" },
							{ "columnValue": "storageOutTypeCn", "columnName": "出库类型" },
							{ "columnValue": "itemTypeId", "columnName": "品类" },
							{ "columnValue": "gradeValue", "columnName": "规格" },
							{ "columnValue": "thNumber", "columnName": "单件万支" },
							{ "columnValue": "peieceNum", "columnName": "件数" },
							{ "columnValue": "storageCount", "columnName": "出库数量" },
							{ "columnValue": "storageOutTime", "columnName": "出库日期" },
							{ "columnValue": "storageOutUser", "columnName": "出库人" },

						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
				});

			},

			getProcureStorageList(startIndex, pageRow) {
				let self = this;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				self.tableLoading = true;
				self.$http({
					url: "/jinl/procureStorageOut/selectProcureStorageOutMXList",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{ "columnValue": "storageOutTypeCn", "columnName": "出库类型" },
							{ "columnValue": "storageOutCode", "columnName": "出库号" },
							{ "columnValue": "processName", "columnName": "大类" },
							{ "columnValue": "materialName", "columnName": "物料名称" },
							{ "columnValue": "materialSize", "columnName": "物料数量" },
							{ "columnValue": "takeUser", "columnName": "领用人" },
							{ "columnValue": "storageOutStatusCn", "columnName": "状态" },
							{ "columnValue": "storageOutTime", "columnName": "出库日期" },
							{ "columnValue": "storageOutUser", "columnName": "出库人" },

						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
				});

			},

			getList(startIndex, pageRow) {//获取表格数据
				this.tableLoading = true;
				setTimeout(() => {
					if (this.viewType == '0') {
						this.getProductStorageOutListMX(startIndex, pageRow);
					} else if (this.viewType == '1') {
						this.getProcureStorageList(startIndex, pageRow);
						this.tableHeader = [
							{ "columnValue": "tableNum1", "columnName": "出库号" },
							{ "columnValue": "tableNum3", "columnName": "出库号" },
							{ "columnValue": "tableNum4", "columnName": "大类" },
							{ "columnValue": "tableNum5", "columnName": "品类" },
							{ "columnValue": "tableNum6", "columnName": "物料代码" },
							{ "columnValue": "tableNum7", "columnName": "物料名称" },
							{ "columnValue": "tableNum8", "columnName": "品牌规格" },
							{ "columnValue": "tableNum9", "columnName": "单位" },
							{ "columnValue": "tableNum10", "columnName": "出库数量" },
							{ "columnValue": "tableNum11", "columnName": "出库日期" },
							{ "columnValue": "tableNum12", "columnName": "出库人" },
						]
					}
					this.tableData = JSON.parse(JSON.stringify(this.tableData))
					this.tableLoading = false;
				}, 500)
			},
			searchReset() { //重置搜索
				this.queryForm = {
					outStorageUser: '',
					storageOutCode: '',
					storageOutType: '',
				};
				this.time = [];
				this.getList();
			},
		},
		mounted() {
			let self = this;
			self.getList()
		},
		components: { Add },
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";

	.leftList {
		display: flex;
		margin-bottom: 15px;

		li {
			list-style: none;
			width: 120px;
			height: 30px;
			line-height: 28px;
			border-bottom: 1px solid #fff;
			color: #333;
			text-align: center;
			cursor: pointer;
			margin-bottom: 10px;
			transition: all .5s;
			position: relative;
			display: flex;
			justify-content: center;

			&.active {
				color: #ff9935;
				border-color: #ff9935;
				position: relative;
				font-weight: 600;
				font-size: 14px;
			}

			.nums {
				position: absolute;
				right: 5px;
				top: 0;
				background: #f44336;
				color: #fff;
				height: 16px;
				line-height: 16px;
				font-weight: 400;
				border-radius: 8px;
				font-size: 12px;
				padding: 0 5px;
			}
		}
	}
</style>